<template>
  <ry-modal title="出库管理" v-model="visible" width="800px" :ryfooter="false" @cancel="handleCancel">

    <div class="table-operator">
      <a-button @click="searchQuery" type="primary">刷新</a-button>
      <a-button type="primary" @click="handleAdd" :disabled="cellNum === 0">新增出库</a-button>
    </div>

    <a-row>
      <a-col :span="24">
        <ry-table :columns="columns" :loading="loading" :data-source="dataSource"
                  :rowKey="record=>record.id" :pagination="ipagination" bordered
                  :scroll="{ x: 'max-content'}">
            <template slot="operator" slot-scope="{text, record}">
              <a-button @click="handleDelete(record.id)" type="deger">删除</a-button>
            </template>
        </ry-table>
      </a-col>
    </a-row>

    <!-- 新增出库弹框 -->
    <a-modal
      title="新增出库"
      v-model="innerVisible"
      @ok="submitOut"
      @cancel="innerVisible=false">
      <a-form-model :model="form">
        <a-form-model-item label="出库数量">
          <a-input-number v-model="form.ckNum" :min="1" :max="cellNum" style="width: 20%;" /> {{'最大出库数量：' + cellNum + '管'}}
        </a-form-model-item>
        <a-form-model-item label="备注">
          <a-input v-model="form.remark" type="textarea" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </ry-modal>
</template>

<script>
import { RyListMixin } from '@/ryweb'
export default {
  mixins: [RyListMixin],
  name: 'OutModel',
  props: {
    status: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      visible: false,  // 控制出库管理弹框的显示
      initQuery: false,
      innerVisible: false,  // 控制新增出库弹框的显示
      cellCode: null,  // 存储 cellCode
      dataSource: [],  // 存储出库记录数据
      queryParam: {},
      cellNum: 0,
      columns: [
        { title: '出库数量', dataIndex: 'ckNum', align: 'center' },
        { title: '备注', dataIndex: 'remark', align: 'center' },
        { title: '出库时间', dataIndex: 'createTime', align: 'center', scopedSlots: { customRender: 'createTime' } },
        { title: '操作', dataIndex: 'operator', align: 'center', scopedSlots: { customRender: 'operator' } }
      ],
      form: {
        outNum: null,
        remark: ''
      },
      url: {
        list: this.$api.permission.out.out,      // 查询出库记录
        add: this.$api.permission.out.insert,  // 新增出库
        delete: this.$api.permission.out.delete
      }
    };
  },
  methods: {
    // 打开弹框并加载数据
    open(record) {
      console.log('cellId:', record)
      this.cellNum = record.cellNum
      this.form.accountId = record.accountId
      this.queryParam = {
        cellId: record.id,
        status: this.status
      }
      this.visible = true; // 打开弹框
      this.loadData(); // 加载出库记录
    },
    handleCancel () {
      this.$emit('ModalOk')
    },
    // 打开新增出库弹框
    handleAdd() {
      this.form = { outNum: null, remark: '' };  // 清空表单数据
      this.innerVisible = true;
    },

    // 提交新增出库记录
    submitOut() {
      this.$post(this.url.add, {
        cellId: this.queryParam.cellId,  // 传递 cellCode
        ckNum: this.form.ckNum,  // 出库数量
        remark: this.form.remark,  // 备注
        status: this.status,
        accountId: this.form.accountId
      }).then(res => {
        if (res.code === 200) {
          this.loadData();
          this.$emit('ModalOk')
          this.cellNum = this.cellNum - this.form.ckNum
          this.$message.success('新增出库记录成功');
        } else {
          this.$message.error('新增出库记录失败');
        }
      })
      this.innerVisible = false;
    }
  }
};
</script>

<style scoped>
.table-operator {
  margin-bottom: 10px;
}
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.05rem;
}
.ry-modal .body-container-content {
  line-height: 0.01rem;
}
</style>
